import * as React from 'react';
import type { CommonContainerProps } from './common/types';

// Flex 组件：填满父组件剩余的所有内容
export function Flex({ children, style, as: asElement = 'div', ...rest }: CommonContainerProps) {
    const Component = asElement;
    return (
        <Component style={{ display: 'flex', flex: 1, minWidth: 0, minHeight: 0, ...style }} {...rest}>
            {children}
        </Component>
    );
}

// 填满剩下的宽度的 Row 组件
export function Row({ children, style, as: asElement = 'div', ...rest }: CommonContainerProps) {
    return (
        <Flex
            as={asElement}
            style={{
                flexDirection: 'row',
                flex: 1, // 填满剩余宽度
                minWidth: 0, // 防止溢出
                ...style
            }}
            {...rest}
        >
            {children}
        </Flex>
    );
}

// 填满剩下的高的 Column 组件
export function Column({ children, style, as: asElement = 'div', ...rest }: CommonContainerProps) {
    return (
        <Flex
            as={asElement}
            style={{
                flexDirection: 'column',
                flex: 1, // 填满剩余高度
                minHeight: 0, // 防止溢出
                ...style
            }}
            {...rest}
        >
            {children}
        </Flex>
    );
}

export function Blank({ children, style, as: asElement = 'div', ...rest }: CommonContainerProps) {
    const Component = asElement;
    const blankStyle = {
        flexGrow: 1,
        ...style
    };
    return (
        <Component style={blankStyle} {...rest}>
            {children}
        </Component>
    );
}

export function Stack({ 
  children, 
  style, 
  as: asElement = 'div',
  gap = 0,
  direction = 'vertical',
  alignment = 'start',
  preserveSpace = true, // 新增属性，默认保留占位空间
  ...rest 
}: CommonContainerProps) {
  const Component = asElement;
  const childrenArray = React.Children.toArray(children);
  
  // 计算每个子元素的样式
  const styledChildren = childrenArray.map((child, index) => {
    const childStyle: React.CSSProperties = {
      position: 'absolute',
      zIndex: index,
      // 根据方向设置偏移
      ...(direction === 'vertical' ? { top: `${index * gap}px` } : { left: `${index * gap}px` }),
      // 根据对齐方式设置对齐
      ...(alignment === 'center' ? { left: '50%', transform: 'translateX(-50%)' } : {}),
      ...(alignment === 'end' ? { right: '0' } : {}),
    };
    
    return React.cloneElement(React.isValidElement(child) ? child : React.createElement('div', {}, child), {
      style: { ...(React.isValidElement(child) ? child.props.style : {}), ...childStyle },
    });
  });

  // 容器样式
  const containerStyle: React.CSSProperties = {
    position: preserveSpace ? 'relative' : 'static', // 根据preserveSpace决定定位方式
    display: 'block',
    width: '100%',
    // 如果需要保留空间，计算容器高度
    ...(preserveSpace && direction === 'vertical' && { 
      minHeight: `${childrenArray.length * gap + (React.isValidElement(childrenArray[childrenArray.length - 1]) ? 
                  (childrenArray[childrenArray.length - 1].props.style?.height || 0) : 0)}px` 
    }),
    // 如果需要保留空间，计算容器宽度
    ...(preserveSpace && direction === 'horizontal' && { 
      minWidth: `${childrenArray.length * gap + (React.isValidElement(childrenArray[childrenArray.length - 1]) ? 
                 (childrenArray[childrenArray.length - 1].props.style?.width || 0) : 0)}px` 
    }),
    ...style
  };

  return <div>
    <Component style={containerStyle} {...rest}>
      {styledChildren}
    </Component>
  </div>
}    